<template>
  <div class="product-page">
    <div class="menu">
      <Menu />
    </div>
    <el-scrollbar class="colL">
      <!-- 研发灵感 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">研发灵感</div>
          <el-button
            type="primary"
            size="small"
            icon="Refresh"
            :style="{ marginLeft: 'auto' }"
            @click="handleTry"
            >试一试</el-button
          >
        </div>
        <el-input type="textarea" v-model="form.yflg" :rows="4" />
      </div>

      <!-- 主要原材料 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">主要原材料</div>
        </div>
        <div class="tools">
          <el-select
            v-model="form.yiji"
            placeholder="一级菜单"
            :style="{ width: '128px' }"
          ></el-select>
          <el-select
            v-model="form.erji"
            placeholder="二级菜单"
            :style="{ width: '128px' }"
          ></el-select>
          <el-select
            v-model="form.sanji"
            placeholder="三级菜单"
            :style="{ width: '128px' }"
          ></el-select>
        </div>
        <el-input
          type="textarea"
          v-model="form.ycl"
          placeholder="请输入主要原材料"
          :rows="3"
          :style="{ marginTop: '8px' }"
        />
        <div class="box">
          <div class="item-box">
            <div class="label">口味</div>
            <div class="value">
              <el-select v-model="form.kouwei" placeholder="不限"></el-select>
            </div>
          </div>
          <div class="item-box">
            <div class="label">口感</div>
            <div class="value">
              <el-select v-model="form.kougan" placeholder="不限"></el-select>
            </div>
          </div>
          <div class="item-box">
            <div class="label">外形</div>
            <div class="value">
              <el-select v-model="form.waixing" placeholder="不限"></el-select>
            </div>
          </div>
          <div class="item-box">
            <div class="label">颜色</div>
            <div class="value">
              <el-select v-model="form.yanse" placeholder="不限"></el-select>
            </div>
          </div>
        </div>
      </div>

      <!-- 消费场景 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">消费场景</div>
        </div>
        <div class="radio-group">
          <div class="item-box">
            <el-radio v-model="form.xfcj" :label="1">不限</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.xfcj" :label="2">轻零食</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.xfcj" :label="3">代餐</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.xfcj" :label="4">能量棒</el-radio>
          </div>
        </div>
      </div>

      <!-- 特殊需求 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">特殊需求</div>
        </div>
        <div class="radio-group">
          <div class="item-box">
            <el-radio v-model="form.gnxxq" :label="1">不限</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.gnxxq" :label="2">低糖</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.gnxxq" :label="3">低脂</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.gnxxq" :label="4">高纤维素</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.gnxxq" :label="5">高蛋白</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.gnxxq" :label="6">无麸</el-radio>
          </div>
        </div>
      </div>

      <!-- 功能性需求 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">功能性需求</div>
        </div>
        <div class="radio-group">
          <div class="item-box">
            <el-radio v-model="form.tsxq" :label="1">不限</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.tsxq" :label="2">补气血</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.tsxq" :label="3">促消化</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.tsxq" :label="4">助眠</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.tsxq" :label="5">提高免疫</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.tsxq" :label="6">生发</el-radio>
          </div>
        </div>
        <div class="box">
          <div class="item-box" :style="{ width: '100%' }">
            <div class="label">地区</div>
            <div class="value">
              <el-select placeholder="不限"></el-select>
            </div>
          </div>
          <div class="item-box" :style="{ width: '100%' }">
            <div class="label">节日</div>
            <div class="value">
              <el-select placeholder="不限"></el-select>
            </div>
          </div>
          <div class="item-box" :style="{ width: '100%' }">
            <div class="label">季节</div>
            <div class="value">
              <el-select placeholder="不限"></el-select>
            </div>
          </div>
        </div>
      </div>

      <!-- 标签 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">标签</div>
        </div>
        <div class="radio-group">
          <div class="item-box">
            <el-radio v-model="form.bq" :label="1">不限</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.bq" :label="2">宅家</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.bq" :label="3">温暖</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.bq" :label="4">回归自然</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.bq" :label="5">快节奏</el-radio>
          </div>
          <div class="item-box">
            <el-radio v-model="form.bq" :label="6">解压</el-radio>
          </div>
        </div>
        <div class="range-bar">
          <div class="label"></div>
          <div class="value"></div>
        </div>
        <div class="box" :style="{ marginTop: '0px' }">
          <div class="item-box" :style="{ width: '100%' }">
            <div class="label" :style="{ width: '70px' }">保质期</div>
            <div class="value">
              <el-slider v-model="form.bzq" />
            </div>
          </div>
        </div>
      </div>

      <!-- 高级约束 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">高级约束</div>
          <el-switch
            v-model="form.gjys"
            :style="{ '--el-switch-on-color': '#13ce66', marginLeft: '12px' }"
          />
        </div>
        <div class="box" v-if="form.gjys">
          <div class="item-box" :style="{ width: '100%' }">
            <div class="label" :style="{ width: '68px' }">不可添加</div>
            <div class="value">
              <el-select></el-select>
            </div>
          </div>
          <div class="item-box" :style="{ width: '100%' }">
            <div class="label" :style="{ width: '68px' }">热量约束</div>
            <div class="text">单位热量</div>
            <el-input :style="{ width: '60px', margin: '0 10px' }"></el-input>
            <div class="text">KJ</div>
          </div>
          <div class="item-box" :style="{ width: '100%' }">
            <div class="label" :style="{ width: '68px' }">营养成分</div>
            <div class="value">
              <el-switch
                v-model="form.yycf"
                style="--el-switch-on-color: #13ce66"
              />
            </div>
          </div>
          <div class="item-box" :style="{ width: '100%' }">
            <div class="label" :style="{ width: '78px' }">蛋白质</div>
            <div class="value">
              <el-slider v-model="form.dbz" />
            </div>
          </div>
          <div class="item-box" :style="{ width: '100%' }">
            <div class="label" :style="{ width: '78px' }">脂肪</div>
            <div class="value">
              <el-slider v-model="form.zf" />
            </div>
          </div>
          <div class="item-box" :style="{ width: '100%' }">
            <div class="label" :style="{ width: '78px' }">碳水</div>
            <div class="value">
              <el-slider v-model="form.ts" />
            </div>
          </div>
          <div class="item-box" :style="{ width: '100%' }">
            <div class="label" :style="{ width: '78px' }">维生素</div>
            <div class="value">
              <el-slider v-model="form.wss" />
            </div>
          </div>
          <div class="item-box" :style="{ width: '100%' }">
            <div class="label" :style="{ width: '78px' }">纤维素</div>
            <div class="value">
              <el-slider v-model="form.xws" />
            </div>
          </div>
        </div>
        <div class="btn-panel">
          <el-button type="primary" :loading="loading" @click="handleCreate"
            >生成</el-button
          >
        </div>
      </div>
    </el-scrollbar>
    <div class="colR">
      <div class="tab" v-if="isShow">
        <div
          class="item"
          :class="{ active: activeIndex === -1 }"
          @click="activeIndex = -1"
        >
          全部
        </div>
        <div
          class="item"
          :class="{ active: activeIndex === 0 }"
          @click="activeIndex = 0"
        >
          方案1
        </div>
        <div
          class="item"
          :class="{ active: activeIndex === 1 }"
          @click="activeIndex = 1"
        >
          方案2
        </div>
        <div
          class="item"
          :class="{ active: activeIndex === 2 }"
          @click="activeIndex = 2"
        >
          方案3
        </div>
        <div
          class="item"
          :class="{ active: activeIndex === 3 }"
          @click="activeIndex = 3"
        >
          方案4
        </div>
        <el-button
          type="primary"
          :icon="Refresh"
          :style="{ marginLeft: '20px' }"
          :loading="loading"
          @click="handleCreate"
          >重新生成</el-button
        >
      </div>
      <el-scrollbar v-if="isShow">
        <div :style="{ padding: '20px' }" v-if="loading">
          <el-skeleton animated />
        </div>
        <template v-else>
          <!-- 方案一 -->
          <div class="section" v-if="activeIndex === 0 || activeIndex === -1">
            <div class="title">方案一</div>
            <div class="product-content">
              <div class="intro">
                <div class="product-name">产品名：红枣核桃能量棒</div>
                <div class="column">
                  <div class="name">配料表与配比</div>
                  <div class="cont">
                    <div class="item-box">
                      <div class="label">红枣泥：</div>
                      <div class="value">30%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">核桃碎：</div>
                      <div class="value">20%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">燕麦片：</div>
                      <div class="value">20%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">蜂蜜：</div>
                      <div class="value">15%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">黑芝麻：</div>
                      <div class="value">10%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">肉桂粉：</div>
                      <div class="value">少许</div>
                    </div>
                  </div>
                </div>
                <div class="column">
                  <div class="name">口味特点</div>
                  <div class="cont">
                    <div class="text">
                      甜而不腻，带有淡淡的肉桂香，红枣的甜与核桃的香脆相结合。
                    </div>
                  </div>
                </div>
                <div class="column">
                  <div class="name">营养分析</div>
                  <div class="cont">
                    <div class="text">
                      高纤维，提供良好的能量补充，适合冬季保暖。
                    </div>
                  </div>
                </div>
                <div class="column">
                  <div class="name">包装建议</div>
                  <div class="cont">
                    <div class="text">
                      使用环保材料的个体小包装，外包装上印有温馨的冬季元素，如雪花图案。
                    </div>
                  </div>
                </div>
              </div>
              <div class="slider">
                <div class="bar">
                  <div class="name">产品效果图</div>
                  <el-button
                    type="primary"
                    circle
                    size="small"
                    :icon="RefreshRight"
                    :style="{ marginLeft: '10px' }"
                  ></el-button>
                </div>
                <img src="../../assets/product/1.png" class="image" alt="" />
              </div>
            </div>
          </div>

          <!-- 方案二 -->
          <div class="section" v-if="activeIndex === 1 || activeIndex === -1">
            <div class="title">方案二</div>
            <div class="product-content">
              <div class="intro">
                <div class="product-name">产品名：核桃红枣夹心饼干</div>
                <div class="column">
                  <div class="name">配料表与配比</div>
                  <div class="cont">
                    <div class="item-box">
                      <div class="label">全麦面粉：</div>
                      <div class="value">40%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">黄油：</div>
                      <div class="value">20%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">低糖：</div>
                      <div class="value">10%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">红枣泥：</div>
                      <div class="value">35%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">碎核桃碎：</div>
                      <div class="value">5%</div>
                    </div>
                  </div>
                </div>
                <div class="column">
                  <div class="name">口味特点</div>
                  <div class="cont">
                    <div class="text">
                      酥脆的饼干搭配软糯的红枣泥，核桃碎增加了口感层次。
                    </div>
                  </div>
                </div>
                <div class="column">
                  <div class="name">营养分析</div>
                  <div class="cont">
                    <div class="text">
                      结合全麦的纤维和核桃的不饱和脂肪酸，适合寻求健康小吃的消费者。
                    </div>
                  </div>
                </div>
                <div class="column">
                  <div class="name">包装建议</div>
                  <div class="cont">
                    <div class="text">
                      使用小盒子装，方便携带，盒子设计可采用传统中式元素，强调原料的自然特性。
                    </div>
                  </div>
                </div>
              </div>
              <div class="slider">
                <div class="bar">
                  <div class="name">产品效果图</div>
                  <el-button
                    type="primary"
                    circle
                    size="small"
                    :icon="RefreshRight"
                    :style="{ marginLeft: '10px' }"
                  ></el-button>
                </div>
                <img src="../../assets/product/4.png" class="image" alt="" />
              </div>
            </div>
          </div>

          <!-- 方案三 -->
          <div class="section" v-if="activeIndex === 2 || activeIndex === -1">
            <div class="title">方案三</div>
            <div class="product-content">
              <div class="intro">
                <div class="product-name">产品名：红枣核桃糕点</div>
                <div class="column">
                  <div class="name">配料表与配比</div>
                  <div class="cont">
                    <div class="item-box">
                      <div class="label">红枣切片：</div>
                      <div class="value red">25%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">核桃碎：</div>
                      <div class="value">20%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">鸡蛋：</div>
                      <div class="value">15%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">低筋面粉：</div>
                      <div class="value">30%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">低糖：</div>
                      <div class="value">10%</div>
                    </div>
                  </div>
                </div>
                <div class="column">
                  <div class="name">口味特点</div>
                  <div class="cont">
                    <div class="text">
                      质地松软，红枣的甜味与核桃的香气完美融合。
                    </div>
                  </div>
                </div>
                <div class="column">
                  <div class="name">营养分析</div>
                  <div class="cont">
                    <div class="text">
                      丰富的维生素和矿物质，适合冬季增强身体抵抗力。
                    </div>
                  </div>
                </div>
                <div class="column">
                  <div class="name">包装建议</div>
                  <div class="cont">
                    <div class="text">
                      采用半透明包装，展示产品的天然颜色和质地。包装上可以印有冬季温馨的家庭聚会场景，传达温暖的感觉
                    </div>
                  </div>
                </div>
              </div>
              <div class="slider">
                <div class="bar">
                  <div class="name">产品效果图</div>
                  <el-button
                    type="primary"
                    circle
                    size="small"
                    :icon="RefreshRight"
                    :style="{ marginLeft: '10px' }"
                  ></el-button>
                </div>
                <img src="../../assets/product/3.png" class="image" alt="" />
              </div>
            </div>
          </div>

          <!-- 方案四 -->
          <div class="section" v-if="activeIndex === 3 || activeIndex === -1">
            <div class="title">方案四</div>
            <div class="product-content">
              <div class="intro">
                <div class="product-name">产品名：红枣核桃酸奶冻</div>
                <div class="column">
                  <div class="name">配料表与配比</div>
                  <div class="cont">
                    <div class="item-box">
                      <div class="label">无糖酸奶：</div>
                      <div class="value red">50%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">红枣泥：</div>
                      <div class="value">25%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">核桃碎：</div>
                      <div class="value">10%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">吉利丁片：</div>
                      <div class="value">5%</div>
                    </div>
                    <div class="item-box">
                      <div class="label">蜂蜜：</div>
                      <div class="value">10%</div>
                    </div>
                  </div>
                </div>
                <div class="column">
                  <div class="name">口味特点</div>
                  <div class="cont">
                    <div class="text">
                      酸奶的醇厚与红枣的甜美相结合，核桃增添口感，适合喜欢新奇口味的消费者。
                    </div>
                  </div>
                </div>
                <div class="column">
                  <div class="name">营养分析</div>
                  <div class="cont">
                    <div class="text">富含蛋白质和益生菌，对消化系统有益。</div>
                  </div>
                </div>
                <div class="column">
                  <div class="name">包装建议</div>
                  <div class="cont">
                    <div class="text">
                      使用小杯装，便于一次性食用。包装上可以有冬日暖阳或室内温暖场景的插画，传递温暖舒适的感觉。
                    </div>
                  </div>
                </div>
              </div>
              <div class="slider">
                <div class="bar">
                  <div class="name">产品效果图</div>
                  <el-button
                    type="primary"
                    circle
                    size="small"
                    :icon="RefreshRight"
                    :style="{ marginLeft: '10px' }"
                  ></el-button>
                </div>
                <img src="../../assets/product/2.png" class="image" alt="" />
              </div>
            </div>
          </div>
        </template>
      </el-scrollbar>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import Menu from "./menu.vue";
import { Refresh, RefreshRight } from "@element-plus/icons-vue";
const form = reactive({
  yflg: "",
  yiji: "",
  erji: "",
  sanji: "",
  ycl: "",
  kouwei: "",
  kougan: "",
  waixing: "",
  yanse: "",
  xfcj: 1,
  tsxq: 1,
  gnxxq: 1,
  bq: 1,
  bzq: 0,
  dbz: 0,
  zf: 0,
  ts: 0,
  wss: 0,
  xws: 0,
  yycf: false,
  gjys: false,
});
const loading = ref(false);
const isShow = ref(false);
const activeIndex = ref(-1);

function handleTry() {
  form.yflg =
    "基于红枣和核桃为主要原材料，开发一款轻零食，适合冬季售卖，可以考虑健康性和温暖的感觉。";
}

function handleCreate() {
  isShow.value = true;
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 3000);
}
</script>
<style lang="scss" scoped>
.product-page {
  clear: both;
  overflow: hidden;
  display: flex;
  height: calc(100vh - 60px);
  .menu {
    background-color: #fff;
    margin-right: 20px;
  }
  .colL {
    height: calc(100vh - 100px);
    width: 440px;
    border-radius: 12px;
    overflow: hidden;
    background-color: #fff;
    margin: 20px 0;
    .section {
      clear: both;
      overflow: hidden;
      padding: 0 20px 10px;
      .title-bar {
        height: 44px;
        display: flex;
        align-items: center;
        .title {
          font-weight: bold;
        }
        .btn {
          margin-left: auto;
          cursor: pointer;
        }
      }
      .tools {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 12px;
        .item-box {
          display: flex;
          align-items: center;
          width: calc(50% - 10px);
          padding: 6px 0;
          .label {
            width: 50px;
          }
          .value {
            flex: 1;
            width: 1%;
          }
        }
      }
      .radio-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item-box {
          width: calc(50% - 10px);
        }
      }
      .btn-panel {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 15px 0;
      }
    }
  }
  .colR {
    flex: 1;
    width: 1%;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background-color: #fff;
    margin-left: 20px;
    height: calc(100vh - 100px);
    margin-top: 20px;
    margin-right: 20px;
    .tab {
      display: flex;
      align-items: center;
      padding: 15px 20px;
      border-bottom: solid 1px #eee;
      .item {
        height: 32px;
        padding: 0 15px;
        background-color: #eee;
        display: flex;
        align-items: center;
        margin-right: 12px;
        border-radius: 5px;
        cursor: pointer;
        &.active {
          background-color: #409eff;
          color: #fff;
        }
      }
    }
    .section {
      background-color: #f5f9fd;
      padding: 20px;
      border-radius: 8px;
      margin: 20px;
      border: solid 2px #c6e2ff;
      .title {
        font-weight: bold;
        font-size: 18px;
        padding-bottom: 10px;
        position: relative;
        z-index: 1;
        &::after {
          width: 60px;
          height: 7px;
          background-color: #ffbb40;
          position: absolute;
          left: -1px;
          bottom: 9px;
          z-index: -1;
          content: "";
        }
      }
      .product-content {
        display: flex;
        overflow: hidden;
        justify-content: space-between;
        .intro {
          max-width: 500px;
          min-width: 300px;
          display: flex;
          flex-direction: column;
          padding: 20px 20px 0 0;
          .product-name {
            font-weight: bold;
            line-height: 24px;
          }
          .column {
            background-color: #fff;
            border-radius: 12px;
            padding: 0 15px;
            margin-top: 12px;
            border: solid 1px #eee;
            .name {
              height: 40px;
              display: flex;
              align-items: center;
              border-bottom: solid 1px #eee;
              font-weight: bold;
              color: #409eff;
            }
            .cont {
              padding: 8px 0 10px;
              .item-box {
                display: flex;
                height: 24px;
                align-items: center;
                .label {
                }
                .value {
                  flex: 1;
                  width: 1%;
                }
              }
              .text {
                line-height: 24px;
              }
            }
          }
        }
        .slider {
          min-width: 424px;
          max-width: 760px;
          margin-top: 20px;
          .bar {
            height: 24px;
            display: flex;
            align-items: center;
            font-weight: bold;
          }
          .image {
            width: 100%;
            height: 424px;
            background-color: #eee;
            border-radius: 12px;
            margin-top: 12px;
            object-fit: cover;
          }
        }
      }
    }
  }
}
// 小于1200px
@media screen and (max-width: 1439px) {
  .product-page {
    .colL {
      width: 360px;
    }
  }
}
</style>
